<template>
    <view class="container" :style="themeColor">
        <view class="stopclick" v-if="form == 1" @tap.stop="preventHandler"></view>
        <view class="card-list">
            <view class="add">添加备注</view>
            <view class="addtext">
                <textarea
                    placeholder="请在此输入您的要备注的信息"
                    v-model="remark"
                    placeholder-style="color:#cccccc"></textarea>
            </view>
        </view>
        <view class="card-list" v-if="fromData.length > 0">
            <view v-for="(item, index) in fromData" :key="index">
                <view class="flex-s-c">
                    <view class="name"><text class="xing-red" v-if="item.NoEmpty">*</text>{{ item.Title }}</view>
                    <view v-if="item.ValueType == 0">
                        <!-- 文本框 -->
                        <input
                            class="input"
                            type="text"
                            placeholder-style="color:#cccccc"
                            v-model="item.Value"
                            :placeholder="item.EmptyErrMsg" />
                    </view>
                    <view v-if="item.ValueType == 1" style="flex: 1">
                        <!-- 多选框 -->
                        <checkbox-item
                            @checkboxChange="checkboxChange"
                            :index="index"
                            :data="item.newOptions"></checkbox-item>
                    </view>
                    <template v-if="item.ValueType == 2">
                        <!-- 单选框 -->
                        <radio-item @radioChange="radioChange" :index="index" :data="item.newOptions"></radio-item>
                    </template>
                    <view v-if="item.ValueType == 3" style="flex: 1"
                        ><!-- 下拉框 -->
                        <select-item
                            @bindPickerChange="bindPickerChange"
                            :activevalue="item.Value"
                            :index="index"
                            :data="item.Options"></select-item>
                    </view>
                    <view v-if="item.ValueType == 4" style="flex: 1"
                        ><!-- 日期 -->
                        <date-item @bindDateChange="bindDateChange" :date="item.Value" :index="index"></date-item>
                    </view>
                    <view v-if="item.ValueType == 5" style="flex: 1"
                        ><!-- 日期+时间 -->
                        <datetime-item @ed="ed" :date="item.Value" :index="index"></datetime-item>
                    </view>
                    <view v-if="item.ValueType == 6">
                        <!--文本框 -->
                        <input
                            class="input"
                            type="text"
                            placeholder-style="color:#cccccc"
                            v-model="item.Value"
                            :placeholder="item.EmptyErrMsg" />
                    </view>
                    <view v-if="item.ValueType == 7"
                        ><!--单张图片 -->
                        <img-item :data="item.Value" @chooseImage="chooseImage" :num="1" :index="index"></img-item>
                    </view>
                    <view v-if="item.ValueType == 8"
                        ><!--多张张图片 -->
                        <img-item :data="item.Value" @chooseImage="chooseImage" :num="9" :index="index"></img-item>
                    </view>
                    <view v-if="item.ValueType == 9">
                        <provinces-item :data="item.Value" @changeRegin="changeRegin" :index="index"></provinces-item>
                    </view>
                </view>
            </view>
        </view>
        <button v-if="form != 1" class="btn btn-success next-step" @click="submit">保存</button>
    </view>
</template>

<script>
import { mapMutations } from "vuex"
import { GetDetailListById } from "@/service/api/product.js"
import { addOrUpdateAmount } from "@/service/api/member.js"
import utils from "@/utils/utils.js"
import { uploadImage } from "@/service/api/file.js"
import storage from "@/uni-sub-base/utils/storage.js"
import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue"
import checkboxItem from "@/pages_shop/components/form/checkbox-item.vue"
import radioItem from "@/pages_shop/components/form/radio-item.vue"
import selectItem from "@/pages_shop/components/form/select-item.vue"
import dateItem from "@/pages_shop/components/form/date-item.vue"
import datetimeItem from "@/pages_shop/components/form/datetime-item.vue"
import imgItem from "@/pages_shop/components/form/img-item.vue"
import provincesItem from "@/pages_shop/components/form/provinces-item.vue"
export default {
    components: {
        MxDatePicker,
        checkboxItem,
        radioItem,
        selectItem,
        dateItem,
        datetimeItem,
        imgItem,
        provincesItem,
    },
    data() {
        const defaultday = utils.getDate({
            format: true,
        })
        const defaultdaytime = utils.getDatetime({
            format: true,
        })
        return {
            defaultday: defaultday,
            defaultdaytime: defaultdaytime,
            remark: "",
            orderId: 0,
            id: null,
            fromData: {},
            region: [],
            from: 0,
        }
    },
    computed: {},
    onLoad(e) {
        this.productdata = JSON.parse(decodeURIComponent(e.productdata))
        this.id = this.productdata.OrderFormTemplateId

        if (this.productdata.Remark) {
            this.remark = this.productdata.Remark
        }
        if (e.from) {
            this.form = e.from
        } else {
            this.form = 0
        }
    },

    mounted() {
        this.info()
    },
    methods: {
        ...mapMutations(["UP_REMARK_VIEW"]),
        preventHandler() {
            return true
        },
        info() {
            let path = "?id=" + this.id
            GetDetailListById(path).then((res) => {
                this.fromData = res.Data
                if (this.productdata.CustomForm) {
                    let productdata = JSON.parse(this.productdata.CustomForm)
                    productdata.forEach((pro) => {
                        this.fromData.forEach((e, index) => {
                            if (pro.name === e.Title) {
                                e.Value = pro.value
                                if (e.ValueType == 1 || e.ValueType == 2) {
                                    if (!(e.Options instanceof Array)) {
                                        e.Options = e.Options.split(",")
                                    }
                                    let newOptions = []
                                    e.Options.forEach((e) => {
                                        let obj = {
                                            name: e,
                                            check: false,
                                        }
                                        newOptions.push(obj)
                                    })
                                    e.newOptions = newOptions
                                    let items = e.newOptions,
                                        values = pro.value.split(",")
                                    for (var i = 0, lenI = items.length; i < lenI; ++i) {
                                        const item = items[i]
                                        if (values.includes(item.name)) {
                                            item.check = true
                                        }
                                    }
                                }
                                if (e.ValueType == 3) {
                                    if (!(e.Options instanceof Array)) {
                                        e.Options = e.Options.split(",")
                                    }
                                }
                            } else {
                                if (e.ValueType == 1 || e.ValueType == 2) {
                                    if (!e.Value) {
                                        e.Value = ""
                                    }
                                    if (e.Options) {
                                        if (!(e.Options instanceof Array)) {
                                            e.Options = e.Options.split(",")
                                        }
                                        if (!e.newOptions) {
                                            let newOptions = []
                                            e.Options.forEach((e) => {
                                                let obj = {
                                                    name: e,
                                                    check: false,
                                                }
                                                newOptions.push(obj)
                                            })
                                            e.newOptions = newOptions
                                        }
                                    }
                                }
                                if (e.ValueType == 3) {
                                    if (!(e.Options instanceof Array)) {
                                        e.Options = e.Options.split(",")
                                    }
                                }
                            }
                        })
                    })
                } else {
                    this.fromData.forEach((e) => {
                        e.Value = ""
                        if (e.Options) {
                            e.Options = e.Options.split(",")
                            let newOptions = []
                            e.Options.forEach((e) => {
                                let obj = {
                                    name: e,
                                    check: false,
                                }
                                newOptions.push(obj)
                            })
                            e.newOptions = newOptions
                        }
                        if (e.ValueType == 3) {
                            e.Value = e.newOptions[0].name
                        }
                        if (e.ValueType == 4) {
                            e.Value = this.defaultday
                        }
                        if (e.ValueType == 5) {
                            e.Value = this.defaultdaytime
                        }
                    })
                }
            })
        },
        checkboxChange(index, value) {
            this.fromData[index].Value = value
        },
        radioChange(index, value) {
            this.fromData[index].Value = value
        },
        bindPickerChange(index, value) {
            this.fromData[index].Value = value
        },
        bindDateChange(index, value) {
            this.fromData[index].Value = value
        },
        ed(index, value) {
            this.fromData[index].Value = value
        },
        chooseImage(index, value) {
            this.fromData[index].Value = value
        },
        changeRegin(index, value) {
            this.fromData[index].Value = value.join(",")
        },
        submit() {
            var that = this
            let parm = []
            let obj = {
                ProductId: this.productdata.ProductId,
                Amount: this.productdata.Amount,
                UnitId: this.productdata.UnitId,
                UnitName: this.productdata.UnitName,
                SkuId: this.productdata.SkuId,
                Ratio: this.productdata.Ratio,
            }
            if (this.remark) {
                obj.remark = this.remark
            }
            if (this.fromData.length > 0) {
                let pass = true
                if (pass) {
                    for (let i = 0; i < this.fromData.length; i++) {
                        let e = this.fromData[i]
                        if (e.NoEmpty) {
                            if (!e.Value) {
                                this.easyToast(e.EmptyErrMsg)
                                return (pass = false)
                                break
                            }
                        }
                    }
                }

                let formobj = []
                this.fromData.forEach((e) => {
                    if (e.Value) {
                        let subobj = {
                            name: e.Title,
                            value: e.Value,
                            ValueType: e.ValueType,
                            ID: e.ID,
                        }
                        formobj.push(subobj)
                    }
                })
                obj.customForm = JSON.stringify(formobj)
            }
            parm.push(obj)
            let path = "?orderType=-1"
            let webInfo = storage.getCache("webInfo")
            if (webInfo.IsSelectWarehouse == 1) {
                let warehouse = storage.getCache("warehouse")
                path = path + "&warehouse=" + warehouse.WarehouseId
            }
            addOrUpdateAmount(parm, path).then((res) => {
                if (res.State == 1) {
                    this.easyToast("保存成功")
                    this.UP_REMARK_VIEW(new Date().getTime())
                    setTimeout((e) => {
                        that.easyGoBack()
                    }, 1000)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
    },
}
</script>

<style lang="scss">
page {
    background: #f1f1f1;
}

.container {
    padding: $app-page-padding;
    position: relative;
    .stopclick {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: none;
        z-index: 10000;
    }
}

.flex-s-c {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    align-items: center;
}

.flex {
    padding: 24rpx;
    display: flex;
    align-items: center;

    image {
        width: 120rpx;
        height: 120rpx;
        margin-right: 20rpx;
    }

    .flex-right {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        text {
            padding: 10rpx 0;
        }
    }
}

.totalnum {
    padding: 20rpx 24rpx;

    view {
        border: 1rpx solid #ccc;
        padding: 5rpx 10rpx;
        font-size: 24rpx;
        border-radius: 10rpx;
    }
}

.card-group-cell {
    font-size: 24rpx;
    min-height: 50rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: $app-page-padding $app-page-padding $app-page-padding 0;
    margin-left: $app-page-padding;
    border-bottom: solid 1rpx $uni-bg-color-grey;

    &:last-child {
        // border-bottom: 0;
    }

    .label {
        flex: 1;
        white-space: nowrap;
        margin-right: 20rpx;
    }

    .value {
        display: flex;
        align-items: center;
    }

    .icon {
        margin-left: 20rpx;
    }

    .radio {
        font-size: 20rpx;
    }
}

.card-list {
    margin-bottom: 24rpx;
    background: #ffffff;
    border-radius: 8rpx;

    .flex-s-c {
        font-size: $font-size-30;
        color: $color-gray-1;
        background: $uni-bg-color;
        // background: #ccc;
        padding: 34rpx 0;
        margin: 0 24rpx;
        border-bottom: 1rpx solid #ebebeb;

        .name {
            width: 180rpx;
            overflow: hidden;
            text-overflow: -o-ellipsis-lastline;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            -webkit-box-orient: vertical;
            color: #333333;
        }

        input {
            text-align: left;
        }
    }

    & > .flex-s-c:first-child {
        border-radius: 8rpx 8rpx 0 0;
    }

    & > .flex-s-c:last-child {
        border-radius: 0 0 8rpx 8rpx;
        border: none;
    }

    .w60 {
        width: 60%;
        text-align: right;
    }
}

.next-step {
    margin-top: 72rpx;
    height: 90rpx;
    font-size: 32rpx;
}

.membertag {
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: flex-start;

    text {
        padding: 2rpx 5rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: $app-color-main;
        border: 1rpx solid $app-color-main;
        border-radius: 4rpx;
        margin-left: 10rpx;
    }
}

.add {
    font-weight: bold;
    font-size: 32rpx;
    padding: 24rpx;
    color: #333333;
}

.addtext {
    display: flex;
    padding: 0 24rpx 24rpx 24rpx;

    textarea {
        flex: 1;
        background: #f6f7f7;
        font-size: 30rpx;
        padding: 20rpx;
    }
}

.placeholderColor {
    color: #cccccc;
}

.checkmain {
    display: flex;
    flex-wrap: wrap;

    label {
        display: flex;
        width: 50%;

        view {
            white-space: nowrap;
        }
    }
}
.xing-red {
    color: red;
}
</style>
